<!DOCTYPE html>
<html>
    <head>
        <title>Manager</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/javascript" src="lib/jquery.js"></script>
        <!--<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>-->

        <link rel="stylesheet" href="lib/amaze/css/amui.all.min.css">
        <!--<script type="text/javascript" src="lib/amaze/js/amui.min.js"></script>-->

        <link rel="stylesheet" href="lib/jquery-layout/jquery.layout.css">
        <script type="text/javascript" src="lib/jquery-layout/jquery.layout.js"></script>
        <style type="text/css">
            .layout-top {
                height: 50px;
            }
        </style>
        <script type="text/javascript">
            var layout;
            $(document).ready(function() {
                layout = $('body').layout({
                    //applyDefaultStyles: true,
                    north__closable: true,
                    north__size: 65,
                    north__resizable: false,
                    south__closable: true,
                    south__size: 20,
                    south__resizable: false,
                    west__size: 160,
                    togglerTip_open: "关闭",
                    togglerTip_closed: "打开",
                    resizerTip: "调整宽度",
                    livePaneResizing: true,
                    animatePaneSizing: true,
                    stateManagement__enabled: true
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-layout-center">Center</div>
        <div class="ui-layout-north">North</div>
        <div class="ui-layout-south">South</div>
        <div class="ui-layout-west">West</div>
    </body>
</html>
